<h4>双向数据绑定</h4>
<pre class="note">
功能获取：通过为项目安装表单模块，获取双向数据操作指令 ngModel
应用功能：完成双向数据绑定操作
应用语法：banana in box ＜表单标签 [(ngModel)]="变量"＞
         + [] 属性指令 () 事件绑定
特性：
    1、单行文本框
        ngModel 完成对当前标签的value属性绑定和input事件监听
    2、多行文本域
        ngModel 完成对当前标签的value属性绑定和input事件监听
    3、单选按钮
        ngModel 完成对当前标签的checked属性绑定和change事件的监听
        checked属性的状态取决于绑定的变量和当前标签的value属性比较关系
        + 标签没有定义value，ngModel会为当前绑定的变量返回undefined
        + 标签定义了value，ngmodel会为当前绑定的变量返回 value值
        * 对于分组单选按钮，建议添加name属性用于数据分组
        *（如果不增加name属性可能会出现导致其他单选按钮状态页面发生变化的情况）
    4、多选按钮
        ngModel 完成对当前标签的checked属性绑定和change事件的监听
        checked属性的状态取决于绑定的变量和当前标签的value属性比较关系
        + ngModel对于复选按钮绑定的变量，无论取值为何种类型，最终都将以 true | false 描述变量值
          用于记录当前复选按钮的状态
        + ngModel对于复选按钮,无论标签是否提供 value属性，都只会记录true | false
    5、下拉列表
        ngModel 完成对select标签的value属性绑定和change事件的监听
        + 如果option 提供value属性，被选中时该属性的值会赋值于select value
        + 如果option 不提供value属性，被选中时会将textContent的值会赋值于select value
    6、文件选择标签
        可以完成ngModel的双向数据绑定，得到是当前文件选择器标签的 value 属性
        W3C规范中，所有资源请求属性都不允许加载本地资源文件
        + 实际项目中，如果需要完成选择文件的真实获取，需要手动实现功能

</pre>
<p>msg:{{ msg }}</p>
<input type="text" [value]="msg" #input1 (input)=" msg=input1.value "><br>
<input type="text" [(ngModel)] = 'msg'>
<hr>
<div>
    info:<pre>{{ info }}</pre>
</div>
<textarea name="" [(ngModel)]='info' id="" cols="30" rows="10"></textarea>
<hr>
<div>
    双向数据绑定单选按钮，但不提供value属性值：<input type="radio" [(ngModel)]="radioData"><br>
    双向数据绑定单选按钮，但不提供value属性值：<input type="radio" [(ngModel)]="radioData1"><br>
    <p>radioData2：{{ radioData2 }}</p>
    双向数据绑定单选按钮，提供value属性值：<input type="radio" value="男" [(ngModel)]="radioData2"><br>
    <input type="button" value="radioData2=男" (click)="radioData2='男'">
    <br>
    <p>案例-sex：{{ sex }}</p>
    男：<input type="radio" name="a" value="男" [(ngModel)]="sex">
    女：<input type="radio" name="a" value="女" [(ngModel)]="sex">
    未知：<input type="radio" name="a" value="未知" [(ngModel)]="sex">
</div>
<hr>
<div>
    绑定非数组变量：<input type="checkbox" name="a" [(ngModel)]="checkData1"><br>
    绑定数组变量：<input type="checkbox" name="b" [(ngModel)]="checkData2"><br>
    绑定变量同时提供value属性：<input type="checkbox" name="a" [(ngModel)]="checkData3"><br>
    <br>
    <p>案例： skills：{{ JSON.stringify(skills) }}</p>
    <ul>
        <li *ngFor="let key of getKeys(skills);">
            <input type="checkbox" name="skill" [(ngModel)]="skills[key]">{{key}}
        </li>
    </ul>
</div>
<hr>
<div>
    <p>selectData: {{ selectData }}</p>
    <select name="selectData" [(ngModel)]="selectData">
        <option value="">请选择</option>
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
        <option>D</option>
    </select>
</div>
<hr>
<p>fileData: {{ fileSrc }}</p>
<img [src]="fileSrc" alt="">
<input type="file" name="fileSrc" (change)="changeFile($event)">